<template>
	<div class="boxes-detail-basic-info">
		<div class="intermediate-box">
			<!-- 左侧基础信息模块 -->
			<div class="description-box">
				<div class="name-time-box item">
					<div class="child-item flex">
						<div class="left-box">
							<div>设备名称</div>
							<div>{{ basicInfo.boxName }}</div>
						</div>
						<div class="right-box">
							<div v-if="g6Permission.showBtn('device-name-edit')" class="change-btn" @click="pageButtonClick('device-name-edit')">
								更改
							</div>
						</div>
					</div>
					<div class="child-item flex">
						<div class="left-box">
							<div>系统时间</div>
							<div>{{ basicInfo.systemTime }}</div>
						</div>
						<div class="right-box">
							<div v-if="g6Permission.showBtn('os-time-edit')" class="change-btn" @click="pageButtonClick('os-time-edit')">更改</div>
						</div>
					</div>
				</div>
				<div class="sn-code-box item">
					<div class="left-box">
						<div>SN码</div>
						<div>{{ basicInfo.serial }}</div>
					</div>
				</div>
				<div class="version-box item">
					<div class="child-item flex">
						<div class="left-box">
							<div class="img-box">固件版本</div>
							<div>{{ basicInfo.firmwareVersion }}</div>
						</div>
					</div>

					<div class="child-item flex">
						<div class="left-box">
							<div>软件版本</div>
							<div>{{ basicInfo.softwareVersion }}</div>
						</div>
					</div>

					<div class="child-item flex">
						<div class="left-box">
							<div>算法版本</div>
							<div>{{ basicInfo.sdkVersion }}</div>
						</div>
					</div>
				</div>
				<div class="device-num item">
					<div class="left-box">
						<div>接入设备数量</div>
						<div>{{ basicInfo.totalDeviceCount }}</div>
					</div>
				</div>
				<div class="algo-item item">
					<div class="left-box">
						<div>授权算法</div>
						<div>
							人脸识别算法丨安全帽检测算法丨反光衣检测算法丨工服识别算法丨睡岗检测算法丨离岗检测算法丨口罩检测算法丨火焰检测算法丨烟雾检测算法丨人员超限检测算法丨越界检测算法丨区域入侵检测算法丨跌倒检测算法
						</div>
					</div>
				</div>
			</div>
			<!-- 结束 -->

			<!-- 右侧硬件信息模块 -->
			<div class="hardware-box">
				<div class="hardware-info">
					<div class="img-box">
						<img :src="hardwareBox" alt="" style="height: 188px" />
						<img :src="banner" alt="" style="width: 195.8px; height: 16px; margin-top: 4px" />
					</div>
					<div class="info-box">
						<div class="item">
							<div>处理器</div>
							<div>{{ basicInfo.cpu }}</div>
						</div>
						<div class="item">
							<div>操作系统</div>
							<div>{{ basicInfo.os }}</div>
						</div>
						<div class="item">
							<div>内存</div>
							<div>{{ basicInfo.memory }}</div>
						</div>
						<div class="item">
							<div>固态硬盘</div>
							<div>{{ basicInfo.disk }}</div>
						</div>
						<div class="item">
							<div>型号</div>
							<div>{{ basicInfo.model }}</div>
						</div>
					</div>
				</div>

				<div class="logo">
					<global-svg-icon icon-name="GLASSSIX" width="92px" height="11px"></global-svg-icon>
				</div>
			</div>
			<!-- 结束 -->

			<!-- 修改系统名称弹窗 -->
			<box-info-device-name
				:id="id"
				:box-name="basicInfo.boxName"
				:visible="nameModalVisible"
				@ok="detailGetById"
				@close="nameModalVisible = false"
			></box-info-device-name>

			<!-- 修改系统时间弹窗 -->
			<box-info-os-time :id="id" :visible="timeModalVisible" @ok="detailGetById" @close="timeModalVisible = false"></box-info-os-time>
		</div>
	</div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { g6Permission } from 'glasssix-utils-ts';
import hardwareBox from '@/global-assets/imgs/hardware-box.png';
import banner from '@/global-assets/imgs/banner.png';
import { BoxManageApi } from '../../../api';
import { _TsBasicInfo } from '../../../type';
import { BoxInfoDeviceName, BoxInfoOsTime } from '../../index';

defineOptions({ name: 'BoxBasicInfo' });

const route = useRoute();
// 基础信息
const basicInfo = ref<_TsBasicInfo>({
	boxName: '',
	serial: '',
	systemTime: '',
	firmwareVersion: '',
	softwareVersion: '',
	totalDeviceCount: '',
	os: '',
	model: '',
	cpu: '',
	memory: '',
	disk: '',
	sdkVersion: ''
});
/**
 * -------更改系统名称---------
 */
const nameModalVisible = ref<boolean>(false);

/**
 * -------更改系统时间---------
 */
const timeModalVisible = ref<boolean>(false);
let timer: any = null;

const pageButtonClick = (btnCode: string): void => {
	switch (btnCode) {
		case 'device-name-edit':
			nameModalVisible.value = true;

			break;
		case 'os-time-edit':
			timeModalVisible.value = true;

			break;
		default:
			break;
	}
};

const id = ref<string>('');
const boxSerial = ref<string>('');
// 盒子名称
const name = ref<string>('');
const detailGetById = async (): Promise<void> => {
	const { data } = await BoxManageApi.detailGetById(id.value);
	basicInfo.value = data;

	clearInterval(timer);
	let timestamp = dayjs(basicInfo.value.systemTime).valueOf();

	timer = setInterval(() => {
		// 获取指定日期的时间戳
		timestamp = timestamp + 1000;
		basicInfo.value.systemTime = dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
	}, 1000);
};
onMounted(() => {
	id.value = route.query?.id as string;
	boxSerial.value = route.query?.boxSerial as string;
	name.value = route.query?.name as string;

	detailGetById();
});
onUnmounted(() => {
	clearInterval(timer);
});
</script>

<style lang="less" scoped>
.boxes-detail-basic-info {
	.intermediate-box {
		display: flex;
		justify-content: center;

		.description-box {
			width: 800px;
			height: 528px;
			margin-right: 40px;

			.item {
				margin-bottom: 20px;
				border: 1px solid @borderColor02;
				border-radius: 4px;
				padding: 0 20px;
				background: @background02;
				box-shadow: 0 40px 180px 0 rgba(0, 0, 0, 0.35);
			}

			.left-box,
			.right-box {
				display: flex;
				height: 100%;
				flex-direction: column;
				justify-content: center;
			}

			.left-box {
				.img-box {
					display: flex;
					align-items: center;

					img {
						width: 108.6px;
						height: 15px;
						margin-right: 8px;
						// vertical-align: middle;
					}
				}

				div:first-child {
					margin-bottom: 8px;
					font-size: 16px;
					line-height: 24px;
					color: @text01;
				}

				div:nth-child(2) {
					line-height: 22px;
					color: @text03;
				}
			}

			.name-time-box,
			.version-box {
				display: flex;
				// height: 156px;
				flex-direction: column;
				justify-content: center;

				.child-item:last-child {
					border: none;
				}

				.child-item {
					height: 100%;
					border-bottom: 1px solid @borderColor02;
					padding: 12px 0;

					.right-box {
						.change-btn {
							width: 60px;
							height: 36px;
							border: 1px solid @borderColor02;
							border-radius: 6px;
							font-size: 14px;
							line-height: 34px;
							text-align: center;
							color: @text01;
							box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
							cursor: pointer;

							&:hover {
								background: @mask03;
							}

							&:active {
								background: @mask04;
							}
						}
					}
				}

				.flex {
					display: flex;
					justify-content: space-between;
				}
			}

			.sn-code-box,
			.device-num {
				height: 78px;
			}

			.algo-item {
				padding: 12px 20px;
			}
		}

		.hardware-box {
			width: 380px;
			height: 530px;
			border: 1px solid @borderColor02;
			border-radius: 8px;
			padding: 0 20px 32px;
			background: url('@/global-assets/imgs/hardware-background.webp') center 100%;
			box-shadow: 0 40px 180px 0 rgba(0, 0, 0, 0.35);

			.hardware-info {
				width: 100%;
				height: 406px;
				margin-bottom: 80px;

				.img-box {
					text-align: center;
				}

				.info-box {
					margin-top: 40px;

					.item {
						display: flex;
						margin-bottom: 12px;
						line-height: 22px;
						align-items: center;
						justify-content: center;

						div:first-child {
							width: 56px;
							margin-right: 24px;
							text-align: right;
							color: @text03;
						}

						div:nth-child(2) {
							width: 64px;
							text-align: left;
							color: @text01;
						}
					}
				}
			}

			.logo {
				text-align: center;
			}
		}
	}
}
</style>
